import { useEditTeacherInfo, useTeacherInfo } from '@/services/teacher';
import {
  Button,
  Col,
  Drawer, Form, Input, InputNumber,
  Row,
  Select,
  Space,
  Spin,
} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import UploadImage from '@/components/OSSImageUpload';
import { useMemo } from 'react';
import style from './index.module.less';

interface IProps {
  id?:string,
  onClose:(isReload?: boolean) => void
}

/**
* 教师编辑
*/
const EditTeacher = ({ onClose, id }:IProps) => {
  const [form] = Form.useForm();
  const { data, loading } = useTeacherInfo(id);
  const [editHandler, editLoading] = useEditTeacherInfo();

  const initValue = useMemo(() => (data ? {
    ...data,
    tags: data.tags.split(','),
    photoUrl: [{ url: data.photoUrl }],
  } : {}), [data]);

  const onSubmitHandler = async () => {
    // 此操作获得values和onFinish方法获取的values一样，两种方法
    const values = await form.validateFields();
    if (values) {
      const newValues = {
        ...values,
        tags: values.tags.join(','),
        photoUrl: values.photoUrl[0].url,
      };
      editHandler(id, newValues, onClose);
    }
  };

  return (
    <Drawer
      title={id ? '编辑教师' : '新建教师'}
      onClose={() => onClose()}
      width={720}
      open
      forceRender // 强制render，用于内部内容还没加载时的报错
      extra={(
        <Space>
          <Button onClick={() => onClose()}>取消</Button>
          <Button type="primary" loading={editLoading} onClick={onSubmitHandler}>提交</Button>
        </Space>
      )}
    >
      <Spin spinning={loading}>
        {(data || !id) && (
        <Form
          form={form}
          initialValues={initValue}
          layout="vertical"
        >
          <Form.Item
            name="photoUrl"
            label="教师封面图"
            rules={[{ required: true }]}
            labelCol={{
              span: 24,
            }}
          >
            <UploadImage />
          </Form.Item>
          <Row className={style.row} gutter={20}>
            <Col span={16}>
              <Form.Item
                label="名称"
                name="name"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="教龄"
                name="teacherTime"
                rules={[{ required: true }]}
              >
                <InputNumber />
              </Form.Item>
            </Col>
          </Row>
          <Row className={style.row} gutter={20}>
            <Col span={11}>
              <Form.Item
                label="标签"
                name="tags"
                rules={[{ required: true }]}
              >
                <Select
                  mode="tags"
                />
              </Form.Item>
            </Col>
            <Col span={5}>
              <Form.Item
                label="资历"
                name="seniority"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="学历"
                name="education"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item label="获奖经历" name="carryPrize">
            <TextArea
              maxLength={200}
              className={style.textArea}
              allowClear
              showCount
            />
          </Form.Item>
          <Form.Item label="职业经验" name="experience">
            <TextArea
              maxLength={200}
              className={style.textArea}
              allowClear
              showCount
            />
          </Form.Item>
        </Form>
        )}
      </Spin>
    </Drawer>
  );
};

EditTeacher.defaultProps = {
  id: '',
};

export default EditTeacher;
